<template>
	<view class="container">
		
		<block v-if="!getPlayerSuccess">
			<view class="player-success">玩家数据加载中</view>
		</block>
		
		<block v-else>
			<view class="section-sider">
				<comp-player-panel></comp-player-panel>
				<comp-backpack></comp-backpack>
			</view>
			
			<view class="section-main">
				<view class="main-panel">
					<view class="column">
						<comp-battle></comp-battle>
						<comp-map></comp-map>
					</view>
					<view class="aside">
						<!-- <view style="flex:1;"></view> -->
						<comp-resource-store></comp-resource-store>
						<comp-message></comp-message>
						<!-- <comp-game-config></comp-game-config> -->
					</view>
					
				</view>
				<view class="bottom-panel">
					<view class="operate-buttons">
						<view class="item" @click="pop({name:'铁匠铺',type:'compSmithy'})">铁匠铺</view>
						<view class="item">收集</view>
						<view class="item">图鉴</view>
						<view class="item">生肖</view>
						<view class="item">排行榜</view>
						<view class="item">成就</view>
						<view class="item">家园</view>
						<view class="item">邮件</view>
						<view class="item" @click="save">手动保存</view>
						<view class="item" v-if="this.player.auth == 10" @click="pop({name:'GM管理工具',type:'compGmManager'})">GM管理</view>
					</view>
					<comp-game-info></comp-game-info>
				</view>
			</view>
		</block>
		
		
		<comp-equip-pop></comp-equip-pop>
		<comp-equip-pop body></comp-equip-pop>
		
		
		
		
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup">
				<view class="hd">
					<view class="title">{{popData.name}}</view>
				</view>
				<view class="bd">
					<compGmManager v-if="popData.type == 'compGmManager'"></compGmManager>
					<compSmithy v-if="popData.type == 'compSmithy'"></compSmithy>
				</view>
			</view>
		</uni-popup>
		
		
		<quick-message ref="quick_message"></quick-message>
		
	</view>
</template>

<script>
	import { mapState} from "vuex";

	import compMessage from "@/components/comp-message/comp-message.vue"
	import compPlayerPanel from "@/components/comp-player-panel/comp-player-panel"
	import compBackpack from "@/components/comp-backpack/comp-backpack.vue"
	import compEquipPop from "@/components/comp-equip-pop/comp-equip-pop.vue"
	import compBattle from "@/components/comp-battle/comp-battle.vue"
	import compMap from "@/components/comp-map/comp-map.vue"
	import compGameInfo from "@/components/comp-game-info/comp-game-info.vue"
	import compResourceStore from "@/components/comp-resource-store/comp-resource-store.vue"
	import compSmithy from "@/components/comp-smithy/comp-smithy.vue"
	import compGmManager from "@/components/comp-gm-manager/comp-gm-manager.vue"
	
	export default {
		components:{
			compPlayerPanel,
			compBackpack,
			compMessage,
			compBattle,
			compEquipPop,
			compGameInfo,
			compMap,
			compGmManager,
			compResourceStore,
			compSmithy
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				getPlayerSuccess : false,
				popData : '',
				save_timer : ''
			};
		},
		onReady() {
			
			window.addEventListener('beforeunload', this.beforeUnloadHandler);
			
			
			document.oncontextmenu = function () {
			    return false;
			};
			
			uni.$on('quick_message',(message,type = 'error') => {
				
				let message_type = {
					'success' : 'rgba(78, 240, 105, .95)',
					'warning' : 'rgba(240, 173, 78, .95)',
					'error' : 'rgba(221, 82, 77, .95)'
				}
				
				this.$refs.quick_message.show({
						type:'default', //String 默认default
						msg:message, //String 显示内容 *
						direction:'center', //String 默认顶部显示
						icon:false, //Boolean|String 显示icon(false/true/string 默认显示icon)
						mask:false, //Boolean 遮罩（默认false没有遮罩）
						time:2000, //Number|Boolean 默认3000/false为不自动关闭
						customStyle:{ //自定义样式
							color:'#fff', //字体图标色
							fontSize:'12px',
							border:'1px solid #000',
							backgroundColor:message_type[type] //背景色
						}, 
						iconSize: 14, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
				})
			})
			
		},
		async onLoad() {

			//登录
			let playerData = await this.$request({
				name : 'player',
				method : 'get_player'
			})

			this.$store.commit('mod_player/commit_player_data',playerData.data)
			
			//每10分钟保存一次数据
			this.worker_setInterval = new Worker('./static/worker/worker_setInterval.js');
			this.worker_setInterval.postMessage({
				interval : 1000 * 60 * 10
			})
			this.worker_setInterval.onmessage = (e) => {
				this.$common.save_game()
			}
			

			//聊天框消息
			this.goeasy.pubsub.subscribe({
			    channel: 'chat',
			    onSuccess:  () => {
					 console.info(`订阅全局频道【chat】成功！`)
			    },
				onMessage: (message) => {
					
				   uni.$emit('message',message)
				}
			});
			
			
			//全屏消息
			this.goeasy.pubsub.subscribe({
			    channel: 'window',
			    onSuccess:  (message) => {
					 console.info(`订阅全局频道【window】成功！`)
			    },
				onMessage: (message) => {
					switch (message.content){
						case "refresh_page":
							this.$common.save_game().then(()=>{
								window.location.reload() 
							})
	
							break;
						default:
							break;
					}
				}
			});
			
			//全屏消息
			this.goeasy.pubsub.subscribe({
			    channel: 'game-info',
			    onSuccess:  () => {
					 console.info(`订阅全局频道【game-info】成功！`)
			    },
				onMessage: (message) => {
				   uni.$emit('game-info',message)
				}
			});
			
			
			//账号私有消息
			this.goeasy.pubsub.subscribe({
			    channel: this.player.uid,
			    onSuccess:  () => {
					 console.info(`订阅私有【${this.player._id}】频道成功！`)
			    },
				onMessage: (message) => {
					
				}
			});
			
			this.getPlayerSuccess = true
			
			
		},
		
		beforeDestroy() {
			window.removeEventListener('beforeunload', this.beforeUnloadHandler);
		},

		methods : {
			beforeUnloadHandler(event) {
				//this.$common.save_game();
				// event.preventDefault();
				// event.returnValue = '';
				// return '';
			},
			pop(options){
				this.$refs.popup.open();
				this.popData = options
			},
			save(){
				
				if(!this.save_timer || (Date.parse(new Date()) - this.save_timer >= 1000 * 60)){
					this.$common.save_game()
					this.save_timer = Date.parse(new Date());
				}else{
					uni.$emit('game-info',{
						content : `<span style="color:var(--color-yellow)">[提示]</span> <span style="color:var(--color-red2)">请不要频繁手动保存</span>`
					})
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		height:100vh;
		min-height:800px;
		min-width: 1600px;
		.player-success{
			padding:10px;
		}
		
		.section-sider{
			width:430px;
			border-right: 1px solid #000;
			display: flex;
			flex-direction: column;
		}
		
		.section-main{
			flex:1;
			display: flex;
			flex-direction: column;
			
			.main-panel{
				flex:1;
				display: flex;
				
				overflow: hidden;
				.column{
					flex:1;
					display: flex;
					flex-direction: column;
					.map-info-panel{
						height:200px;
						border-top: 1px solid #000;
						background-color: $game-color-2;
					}
				}
				.aside{
					width:400px;
					border-left: 1px solid #000;
					display: flex;
					flex-direction: column;
				}
			}
			.bottom-panel{
				display: flex;
				flex-direction: column;
				border-top: 1px solid #000;
				.operate-buttons{
					height:40px;
					border-bottom: 1px solid #000;
					display:flex;
					align-items: center;
					gap:10px;
					padding-left:10px;
					.item{
						background-color: $game-color-2;
						border: 1px solid #000;
						height:22px;
						display: flex;
						align-items: center;
						padding:0 10px;
						font-size:12px;
						cursor: pointer;
						&:hover{
							background-color: $game-color-3;
						}
					}
				}
			}
		}
	}
</style>
